import { useNavigate } from "react-router-dom";
export default function InfoList(props) {
  const data = [
    {
      img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
      title: "Meet hotel",
      des: "不是所有的兼职汪都需要风吹日晒,赛事的很快就铝合金",
      id: 1,
    },
    {
      img: "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
      title: "McDonald's invites you",
      des: "不是所有的兼职汪都需要风吹日晒，大大啥东西看了会饥渴了寒假快乐",
      id: 2,
    },
    {
      img: "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
      title: "Eat the week",
      des: "不是所有的兼职汪都需要风吹日晒，丽江大理石1卢锡安睡觉了看见底",
      id: 3,
    },
  ];
  return (
    <div className="infoList">
      {data.map((res) => (
        <IistItem dataItem={res} key={res.id} />
      ))}
    </div>
  );
}
function IistItem(props) {
  const navigate = useNavigate();
  const { dataItem } = props;
  return (
    <div
      style={{ padding: "0 15px" }}
      onClick={() =>
        navigate("/goodsInfo/" + dataItem.id, { state: { name: "小明" } })
      }
    >
      <div
        style={{
          lineHeight: "50px",
          color: "#888",
          fontSize: 18,
          borderBottom: "1px solid #F6F6F6",
        }}
      >
        {dataItem.title}
      </div>
      <div style={{ display: "flex", padding: "15px 0" }}>
        <img
          style={{ height: "64px", marginRight: "15px" }}
          src={dataItem.img}
          alt=""
        />
        <div style={{ lineHeight: 1 }}>
          <div style={{ marginBottom: "8px", fontWeight: "bold" }}>
            {dataItem.des}
          </div>
          <div>
            $
            <span style={{ fontSize: "30px", color: "#FF6E27" }}>
              {dataItem.id}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
